<!-- 左箭头
@param{Number}size 大小 upx
@param{String}color 颜色
@param{Strig}direction 方向-->
<template>
	<view :style="{width: calcSize,height: calcSize}">
		<view class="g-back-btn" :style="{width: calcSize,height: calcSize,transform: calcDirection}">
			<view class="u-back-line1" :style="{backgroundColor: color}"></view>
			<view class="u-back-line2" :style="{backgroundColor: color}"></view>
		</view>
	</view>
</template>

<script>
	export default {
        props: ['size','color','direction'],
		data() {
			return {
			};
		},
        computed: {
            calcSize() {
                return uni.upx2px(this.size) + 'px';
            },
            calcDirection() {
                let styles = `translateX(-50%) rotate(${45}deg)`;
                let type = this.direction;
                
                switch (this.direction) {
                    case 'left':
                        styles = `translateX(50%) rotate(${45}deg)`;
                        break;
                    case 'right':
                        styles = `translateX(-50%) rotate(${225}deg)`;
                        break;
                    case 'top':
                        styles = `translateY(50%) rotate(${135}deg)`;
                        break;
                    case 'bottom':
                        styles = `translateY(-50%) rotate(${-45}deg)`;
                        break;
                }
                return styles;
            }
        }
	}
</script>

<style>
    .g-back-btn {
         position: relative;
         /* transform: rotate(45deg); */
    }
    .u-back-line1 {
        width: 4upx;
        height: 50%;
        border-radius: 100upx;
        background: #000;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .u-back-line2 {
        width: 50%;
        height: 4upx;
        border-radius: 100upx;
        background: #000;
        position: absolute;
        bottom: 0;
        left: 0;
    }
</style>
